<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <canvas id="box" width=400 height=400></canvas>
</body>

</html>
<script>
  /** @type {HTMLCanvasElement} */ // 可以提示语法
  var box = document.getElementById('box');
  var gl = box.getContext("webgl");
  gl.clearColor(0.0, 1.0, 0.5, 0.5);
  console.log(gl.COLOR_BUFFER_BIT)
  gl.clear(gl.COLOR_BUFFER_BIT);

  let vertexSource = `
    attribute vec3 position;
    void main(){
      gl_Position = vec4(position,1.0);
    }
  `
  let fragmenSource = `
    void main(){
      gl_FragColor = vec4(${156/255.0},0.6,0.4,0.8);
    }
  `

  let vertexshader = gl.createShader(gl.VERTEX_SHADER);
  let fragmentshader = gl.createShader(gl.FRAGMENT_SHADER);

  gl.shaderSource(vertexshader, vertexSource)
  gl.shaderSource(fragmentshader, fragmenSource)

  gl.compileShader(vertexshader)
  gl.compileShader(fragmentshader)

  var program = gl.createProgram();
  gl.attachShader(program, vertexshader);
  gl.attachShader(program, fragmentshader);
  gl.linkProgram(program);

  gl.useProgram(program);

  let positionIndex = null; // 就是用给glsl中的position 传递值的
  gl.bindAttribLocation(program, positionIndex, 'position');
  // positionIndex = gl.getAttribLocation(program, 'position');

  // 类型数组 Float32Array
  var data = new Float32Array([
    0.0, 0.1, 0.0, // 上点
    0.1, 0.0, 0.0, // 右点
    0.0, -0.1, 0.0,
    -0.1, 0.0, 0.0 // 左点
  ])
  console.log(data)

  // 缓存区对象  position 只能接收一个三维向量；我们需要把数据先发到缓存区对象中
  // 然后 GLSL 可以自动循环从缓存区对象中获取对应的值

  // 创造缓存区对象
  // 可以把我们的所有顶点都存储到这个缓存区中
  let buffer = gl.createBuffer();

  //绑定buffer
  // glsl获取顶点的说话 会自动根据gl.ARRAY_BUFFER去获取
  gl.bindBuffer(gl.ARRAY_BUFFER,buffer)


  //把上边创造的顶点数据 存储到 创造的buffer中；
  gl.bufferData(gl.ARRAY_BUFFER,data,gl.STATIC_DRAW)

    // 允许 给positionIndex 传递数据
  gl.enableVertexAttribArray(positionIndex)

  // 告诉 glsl怎么用这些数据
  gl.vertexAttribPointer(positionIndex, 3, gl.FLOAT, false, 0,0)
  gl.drawArrays(gl.LINE_LOOP,0,4)
</script>